<template>
    <div class="login">
        <div class="one">登录</div>
        <div class="inp">
            <input type="text" placeholder="输入手机号/用户名" v-model="from.phone">
        </div>
        <div class="inp">
            <input type="password" placeholder="输入密码" v-model="from.pass">
        </div>
        <div class="zhuce">
            <div class="registe" @click="zhuce()">去注册</div>
        </div>
        <div class="denglu">
            <button @click="denglu()">登录</button>
        </div>
    </div>
</template>

<script>
import { user_login } from '../api'
export default {
    data(){
        return{
            from:{phone:'',pass:''}
        }
    },
    methods:{
        denglu(){
            user_login({phone:this.from.phone,pass:this.from.pass}).then((res)=>{
                // console.log(res.data);
                if(res.data.code==200){
                    alert('登录成功！')
                    localStorage.setItem('token',res.data.token)
                    this.$router.go(-1)
                }else{
                    alert('登录失败！')
                }
                this.from.phone=''
                this.from.pass=''
            })
        },
        zhuce(){
            this.$router.push('/register')
        }   
    }
}
</script>

<style scoped>
    .login{
        width: 100%;
        height: 720px;
        box-sizing: border-box;
        background: url(../assets/9.jpg);
    }
    .one{
        width: 100%;
        height: 150px;
        line-height: 150px;
        font-size: 40px;
        text-align:center;
    }
    .inp{
        width: 100%;
        height: 50px;
        text-align: center;
        margin-bottom: 20px;
    }
    input{
        width: 80%;
        height: 50px;
        border-radius: 20px;
        font-size:18px ;
        text-align: center;
        border: none;
    }
    .zhuce{
        width: 100%;
        text-align: right;
    }
    .registe{
        font-size: 20px;
        margin-right: 20px;
        color: rgb(248, 132, 0);
    }
    .denglu{
        width: 100%;
        height: 50px;
        text-align: center;
        margin-top:20px ;
    }
    button{
        width: 80%;
        height: 50px;
        border-radius: 20px;
        font-size:18px ;
        border: none;
    }

</style>